<template>
  <div id="select" style="minHeight: 500px">
    <DatePicker
      type="datetime"
      format="yyyy-MM-dd HH:mm"
      placeholder="开始时间"
      style="width: 200px"
      v-model="start"
    ></DatePicker>
    <br />
    实时： <i-switch v-model="real_time" />
    <br />
    <DatePicker
      type="datetime"
      format="yyyy-MM-dd HH:mm"
      placeholder="结束时间"
      style="width: 200px"
      v-model="end"
      :disabled="real_time"
    ></DatePicker>
    <br />
    <br />
    组：
    <Select v-model="group" style="width: 200px">
      <Option v-for="item in groups" :value="item.name" :key="item.id">{{
        item.name
      }}</Option>
    </Select>
    <br />
    <br />
    <Button type="primary" @click="submit">确定</Button>
  </div>
</template>
<script>
export default {
  name: "MessageSelect",
  data() {
    return {
      start: new Date(),
      end: new Date(),
      real_time: true,
      groups: [],
      group: '',
    };
  },
  methods: {
    submit() {
      if (this.real_time)
        this.$api.get(
          "staticmessage/",
          { start: this.formatDate(this.start), group: this.group },
          (response) => {
            if (response.status == 200) {
              var data = response.data;
              if (data.err_code == 0) {
                this.$router.push({
                  name: "Message",
                  params: {
                    data: data.data,
                    real_time: this.real_time,
                    group:this.group,
                    start:this.start,
                    end:null,
                  },
                });
              } else {
                this.$Message.error("请求失败，" + data.error);
              }
            } else {
              this.$Message.error("请求失败，" + response);
            }
          }
        );
      else
        this.$api.get(
          "staticmessage/",
          {
            start: this.formatDate(this.start),
            end: this.formatDate(this.end),
            group: this.group,
          },
          (response) => {
            if (response.status == 200) {
              var data = response.data;
              if (data.err_code == 0) {
                this.$router.push({
                  name: "Message",
                  params: {
                    data: data.data,
                    real_time: this.real_time,
                    group:this.group,
                    start:this.start,
                    end:this.end,
                  },
                });
              } else {
                this.$Message.error("请求失败，" + data.error);
              }
            } else {
              this.$Message.error("请求失败，" + response);
            }
          }
        );
    },
    formatDate(UTCDateString) {
      if (!UTCDateString) {
        return "-";
      }
      function formatFunc(str) {
        return str > 9 ? str : "0" + str;
      }
      var date2 = new Date(UTCDateString);
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = formatFunc(date2.getHours());
      var minute = formatFunc(date2.getMinutes());
      var dateStr = String( year) + String(mon) + String(day) + String(hour) + String(minute);
      return dateStr;
    },
  },
  created: function () {
    this.$api.get("groups/", {}, (response) => {
      if (response.status == 200) {
        var data = response.data;
        if (data.err_code == 0) {
          this.groups = data.data;
        } else {
          this.$Message.error("请求失败，" + data.error);
        }
      } else {
        this.$Message.error("请求失败，" + response);
      }
    });
  },
};
</script>
<style>
</style>
